<template>
	<div class="aq-amap-box" :style="{ height: props.height + 'px' }">
		<div class="aq-amap-search">
			<!-- 方式一直接下拉展示 -->
			<el-select
				style="flex: 1"
				v-model="searchVal"
				filterable
				clearable
				remote
				placeholder="请输入"
				:remote-method="remoteMethod"
				@change="selectChange"
			>
				<el-option v-for="item in searchOptions" :key="item.value" :label="item.label" :value="item.value" />
			</el-select>
			<!-- 方式二点击搜索展示 -->
			<!-- <el-input v-model="searchVal" placeholder="请输入" :prefix-icon="Search" clearable />
			<el-button type="primary" style="margin-left: 10px" @click="searchBtn">搜索</el-button> -->
		</div>
		<div class="aq-amap-content">
			<!-- <div class="aq-amap-content-search">
				<div id="panel"></div>
			</div> -->
			<div id="mapContainer"></div>
		</div>
		<div class="aq-amap-address">{{ mapAddress }}</div>
	</div>
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import { Search } from '@element-plus/icons-vue';
import { ref, onMounted } from 'vue';
const props = defineProps({
	height: {
		type: Number,
		default: 500
	}
});
let searchVal = ref('');
let searchOptions = ref([]);
let mapAddress = ref('');
let AMaps = ref(null);
let maps = ref(null);
let geocoder = ref(null);
let placeSearch = ref(null);
let lnglat = [104.06677, 30.653135];
const initMap = () => {
	AMapLoader.load({
		key: '2faaca36dc73b043479bb59b21e697fc',
		version: '2.0',
		plugins: [
			'AMap.Autocomplete',
			'AMap.PlaceSearch',
			'AMap.Scale',
			'AMap.OverView',
			'AMap.ToolBar',
			'AMap.MapType',
			'AMap.PolyEditor',
			'AMap.CircleEditor',
			'AMap.Geolocation',
			'AMap.Heatmap',
			'AMap.DistrictLayer',
			'AMap.HawkEye',
			'AMap.Geocoder',
			'AMap.DistrictSearch'
		]
	})
		.then((AMap) => {
			AMaps.value = AMap;
			maps.value = new AMap.Map('mapContainer', {
				resizeEnable: true, //调整大小启用
				viewMode: '3D', //是否为3D地图模式
				zoom: 10, //初始化地图级别
				center: [104.06677, 30.653135] //初始化地图中心点位置
			});
			// 标记点
			const marker = new AMap.Marker({
				position: [104.06677, 30.653135],
				map: maps.value
			});
			// 地址
			geocoder.value = new AMap.Geocoder({
				city: '全国'
			});
			// 搜索
			placeSearch.value = new AMap.PlaceSearch({
				citylimit: true,
				pageSize: 10, // 每页显示结果数量
				pageIndex: 1, // 当前页码
				city: '', // 指定搜索城市，留空表示全国搜索
				map: maps.value // 绑定地图实例
				// panel: 'panel' // 结果列表DOM容器的ID
			});
		})
		.catch((e) => {
			console.log(e);
		});
};
onMounted(() => {
	initMap();
});
// 通过经纬度获取地址
const getAddress = (code) => {
	return new Promise((resolve, reject) => {
		geocoder.value.getAddress(code, (status, result) => {
			// console.log('通过经纬度拿到的地址', result);
			if (status === 'complete' && result.info === 'OK') {
				resolve(result.regeocode);
			} else {
				reject();
			}
		});
	});
};
// 搜索
let timer = null;
const remoteMethod = (query) => {
	if (!query) return;
	if (timer) {
		clearTimeout(timer);
	}
	timer = setTimeout(() => {
		searchOptions.value = [];
		searchFun(query);
	}, 500);
};
const searchFun = (query) => {
	placeSearch.value.search(query, async (status, result) => {
		// console.log('搜索结果', result);
		if (status === 'complete' && result.info === 'OK') {
			// 处理搜索结果-远程搜索下拉才用这个
			for (const item of result.poiList.pois) {
				let lngLat = [item.location.lng, item.location.lat];
				let resultObj = await getAddress(lngLat);
				let obj = {
					value: lngLat,
					label:
						item.name + ' ' + resultObj.addressComponent.province + resultObj.addressComponent.city + resultObj.addressComponent.district
				};
				searchOptions.value.push(obj);
			}
		} else {
			// 处理搜索失败
		}
	});
};
const searchBtn = () => {
	if (!searchVal.value) return;
	searchFun(searchVal.value);
};
const selectChange = () => {
	// 标记
	/* const marker = new AMaps.value.Marker({
		position: searchVal.value,
		map: maps.value
	}); */
	if (!searchVal.value) {
		maps.value.setCenter(lnglat);
		maps.value.setZoom(10);
	} else {
		maps.value.setCenter(searchVal.value);
		maps.value.setZoom(9);
	}
};
</script>

<style lang="scss">
.aq-amap-box {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	.aq-amap-search {
		display: flex;
		align-items: center;
	}
	.aq-amap-content {
		position: relative;
		width: 100%;
		flex: 1;
		margin: 10px 0;
		box-sizing: border-box;
		overflow: hidden;
	}
	.aq-amap-content-search {
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9999;
		display: flex;
		align-items: center;
		#panel {
			width: 250px;
			.amap_lib_placeSearch {
				min-width: 200px !important;
			}
		}
	}
	#mapContainer {
		width: 100%;
		height: 100%;
		// min-height: 300px;
	}
	.aq-amap-address {
		font-size: 14px;
	}
}
</style>
